<template>
  <div>
    <el-drawer
      title="调拨单详情"
      size="75%"
      :visible.sync="visible"
      :direction="direction"
      :append-to-body="true"
      :with-header="false"
    >
      <div class="page">
        <div class="title">
          <div class="title-text">调拨单详情{{ stockTransInfo.stockTransCode }}</div>
          <el-tag class="tag" :class="setClassName(stockTransInfo)">{{ formatColumnMap(transStatusMap, 'value', stockTransInfo.transStatus, 'desc') }}</el-tag>
        </div>
        <div class="center">
          <div class="left">
            <el-descriptions title="基本信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
              <el-descriptions-item label="调拨类型">{{ formatColumnMap(transTypeMap, 'value', stockTransInfo.transType, 'desc') }}</el-descriptions-item>
              <el-descriptions-item label="调出仓库">{{ stockTransInfo.outStoreName }}</el-descriptions-item>
              <el-descriptions-item label="调入仓库">{{ stockTransInfo.inStoreName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ stockTransInfo.createTime ? parseTime(stockTransInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ stockTransInfo.applicant }}</el-descriptions-item>
              <el-descriptions-item label="状态">{{ formatColumnMap(transStatusMap, 'value', stockTransInfo.transStatus, 'desc') }}</el-descriptions-item>
              <el-descriptions-item label="调拨车辆">{{ stockTransInfo.carNumber }}</el-descriptions-item>
              <el-descriptions-item label="司机">{{ stockTransInfo.driver }}</el-descriptions-item>
              <el-descriptions-item label="押运员">{{ stockTransInfo.escort }}</el-descriptions-item>
              <el-descriptions-item label="期望日期">{{ stockTransInfo.expectDt? parseTime(stockTransInfo.expectDt, '{y}-{m}-{d}') : '' }}</el-descriptions-item>
              <el-descriptions-item label="调拨扫瓶">{{ stockTransInfo.isSweep===2?'是':'否' }}</el-descriptions-item>
              <!-- <el-descriptions-item label="所属机构">{{ stockTransInfo.apOrgName }}</el-descriptions-item> -->
              <el-descriptions-item label="备注">{{ stockTransInfo.remark }}</el-descriptions-item>
              <el-descriptions-item label="结算金额">{{ stockTransInfo.settlementAmount }}</el-descriptions-item>
            </el-descriptions>
            <div class="table-title">调拨列表</div>
            <lb-table
              ref="lbTable"
              class="lbTable"
              border
              element-loading-text="加载中"
              :column="tableData.column"
              :data="tableData.data"
              :total="tableData.total"
              custom-column
            />
            <el-descriptions v-show="!(stockTransInfo.transStatus===-1||stockTransInfo.transStatus===1)" title="审核信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
              <el-descriptions-item label="审核人">{{ stockTransInfo.checkUser }}</el-descriptions-item>
              <el-descriptions-item label="审核时间">{{ stockTransInfo.auditDt ? parseTime(stockTransInfo.auditDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
              <el-descriptions-item v-if="stockTransInfo.rejectRemark" label="驳回原因">{{ stockTransInfo.rejectRemark }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-show="stockTransInfo.transStatus===5||stockTransInfo.transStatus===6" title="出库信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
              <el-descriptions-item label="出库人">{{ stockTransInfo.outOperator }}</el-descriptions-item>
              <el-descriptions-item label="出库单号"><el-link type="primary" :underline="false" @click="openStockOut(stockTransInfo)">{{ stockTransInfo.stockOutBillCode }}</el-link></el-descriptions-item>
              <el-descriptions-item label="出库时间">{{ stockTransInfo.outDt ? parseTime(stockTransInfo.outDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-show="stockTransInfo.transStatus===6" title="入库信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
              <el-descriptions-item label="入库人">{{ stockTransInfo.inOperator }}</el-descriptions-item>
              <el-descriptions-item label="入库单号"><el-link type="primary" :underline="true" @click="openstockIN(stockTransInfo)">{{ stockTransInfo.stockInBillCode }}</el-link></el-descriptions-item>
              <el-descriptions-item label="入库时间">{{ stockTransInfo.inDt ? parseTime(stockTransInfo.inDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 右侧 -->
          <div class="right">
            <div class="timeline-title">流转信息</div>
            <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.happendDt, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
                <el-card>
                  <h4>{{ item.traceDesc }}</h4>
                  <h4 v-if="item.marker" style="color: red;">{{ `${item.marker}` }}</h4>
                  <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
      <div class="demo-drawer__footer">
        <div class="btn-group">
          <div class="btns">
            <el-button v-show="stockTransInfo.transStatus===1" v-permission="[70302, 3]" type="primary" @click="examineHandler(stockTransInfo)">审核</el-button>
            <el-button v-show="stockTransInfo.transStatus===1 || stockTransInfo.transStatus===2" v-permission="[70302, 4]" type="danger" @click="delHandler(stockTransInfo)">作废</el-button>
          </div>
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <edit-info
      ref="editInfo"
      :truck-map="truckMap"
      :driver-map="driverMap"
      :escort-map="escortMap"
    />
    <outStorageDetail ref="outStorageDetail" :stock-out-type-map="stockOutTypeMap" :gd-status-map="gdStatusMap" />
    <putStorageDetail ref="putStorageDetail" :stock-in-type-map="stockInTypeMap" :gd-status-map="gdStatusMap" />
  </div>
</template>

<script>
  import { stockTransNewDetail, commonTansferInfo, stockTransCancel } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import EditInfo from './EditInfo.vue'
  import putStorageDetail from '../../components/putStorageDetail.vue'
  import outStorageDetail from '../../components/outStorageDetail.vue'
  export default {
    name: 'stockTransDetail',
    components: {
      EditInfo,
      putStorageDetail,
      outStorageDetail
    },
    props: {
      transTypeMap: {
        type: Array,
        required: true
      },
      storeMap: {
        type: Array,
        required: true
      },
      truckMap: {
        type: Array,
        required: true
      },
      driverMap: {
        type: Array,
        required: true
      },
      escortMap: {
        type: Array,
        required: true
      },
      transStatusMap: {
        type: Array,
        required: true
      },
      gdStatusMap: {
        type: Array,
        required: true
      },
      stockOutTypeMap: {
        type: Array,
        required: true
      },
      stockInTypeMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        formatColumnMap,
        parseTime,
        visible: false,
        reverse: false,
        direction: 'rtl',
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' },
        stockTransInfo: {},
        tableData: {
          data: [],
          total: 0,
          column: [
            { type: 'index' },
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称'
            },
            {
              prop: 'goodsSpec',
              label: '规格型号'
            },
            {
              prop: 'gdStatus',
              label: '状态',
              render: (h, { row, $index }) => {
                const obj = {
                  1: '重',
                  2: '空',
                  3: '回收',
                  4: '故障',
                  5: '已损坏',
                  6: '正常',
                  7: '报废',
                  8: '过期',
                  9: '问题重瓶'
                }
                return (
                  <span>{obj[row.gdStatus]}</span>
                )
              }
            },
            {
              prop: 'gdCount',
              label: '数量'
            }
          ]
        },
        flowInfoData: []
      }
    },
    computed: {
    //   ...mapGetters([
    //     'menusArr'
    //   ])
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            // console.log(temp)
            this.temp = temp
            this.getDetail()
          }
        })
      },
      async getDetail() {
        const [res, res1] = await Promise.all([
          stockTransNewDetail({ stockTransCode: this.temp.stockTransCode }),
          commonTansferInfo({ billCode: this.temp.stockTransCode, billType: 12 })])
        if (res.data) {
          this.stockTransInfo = res.data
          this.tableData.data = res.data.detailList
          this.tableData.total = res.data.detailList.length
        }
        if (res1.data) {
          this.flowInfoData = res1.data
        }
      },
      // 审核
      async examineHandler(row) {
        const res = await this.$refs.editInfo.open(row, 'audit')
        if (res) {
          this.$emit('upDdataTable')
          this.visible = false
        }
      },
      // 作废
      delHandler(row) {
        this.$confirm('确认是否作废当前调拨单?', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在作废',
            duration: 0,
            iconClass: 'el-icon-loading'
          })

          stockTransCancel({ stockTransCode: row.stockTransCode })
            .then(() => {
              this.$notify({
                title: '提示',
                message: '作废成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('upDdataTable')
              this.visible = false
            })
            .finally(() => {
              loading.close()
            })
        })
      },
      // 出库
      openStockOut(row) {
        this.$refs.outStorageDetail.open({ ...row, stockOutCode: row.stockOutBillCode })
      },
      // 入库
      openstockIN(row) {
        this.$refs.putStorageDetail.open({ ...row, stockInCode: row.stockInBillCode })
      },
      // 设置类名
      setClassName(row) {
        if (row.transStatus === 2 || row.transStatus === 5 || row.transStatus === 6) {
          // 7:已退单 3:退单申请中
          return 'green'
        }
        if (row.transStatus === -1 || row.transStatus === 4) {
          // 9:退货申请中 12:已退货
          return 'red'
        }
        return ''
      }
    }
  }
</script>

<style lang='scss' scoped>
.page {
  height: calc(100vh - 55px);
  padding: 20px;
  overflow-y: auto;
  .title {
    display: flex;
    margin-bottom: 20px;
    .title-text {
      line-height: 25px;
    }
    .tag {
      margin: 0 10px;
    }
  }
  .center {
    display: flex;
    .left {
      width: 75%;
      height: 100%;
      padding-right: 40px;
      .lbTable {
        margin-bottom: 10px;
      }
    }
    .right {
      height: 100%;
      padding-left: 15px;
      border-left: 1px solid #e3e3e3;
      flex: 1;
      .timeline-title {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        color: white;
        background-color: #38BDBD;
        border-radius: 5px;
      }
      // span {
      //   display: block;
      //   height: 24px;
      //   padding-left: 20px;
      //   font-weight: 700;
      //   line-height: 24px;
      //   text-align: center;
      //   background-color: #e3e3e3;
      // }

      .el-timeline {
        margin-top: 20px;
      }
    }
  }

  /deep/ .el-descriptions__title {
    color: #38BDBD;
  }
  .table-title {
    padding-bottom: 10px;
    font-weight: 600;
    color: #38BDBD;
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 75%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 10px;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.red {
  color: #fff;
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.green {
  color: #fff;
  background-color: #67C23A;
  border-color: #67C23A;
}
</style>
